<template>
	<div class="home">
		<!-- 轮播 -->
		<van-swipe :autoplay="3000">
			<van-swipe-item v-for="(item, i) in carouselList" :key="i" @click="onToProductDetail(item.product_id)"><img :src="APIDomainName + item.img" width="100%" /></van-swipe-item>
		</van-swipe>
		<!-- 宫格快捷导航入口 -->
		<van-grid :column-num="4" :border="false">
			<van-grid-item v-for="(item, i) in homeItems" :key="i" :icon="item.img" :text="item.title" :to="{ name: item.routeName }" :badge="item.count" />
		</van-grid>
		<!-- 首页推荐 -->
		<home-product title="首页推荐" :dataList="recommendedItems" ></home-product>
		<!-- 新品上架 -->
		<home-product title="新品上架" :dataList="newArrialItems" :icon="`point-gift-o`"></home-product>
		<!-- 单品排行 -->
		<home-product title="单品排行" :dataList="topSaleItems" :icon="`gem-o`"></home-product>
	</div>
</template>

<script>
// @ is an alias to /src
//1.导入封装后的接口
import { getHomeDataAPI } from '@/api/home.js';
import HomeProduct from "./components/HomeProduct.vue"
export default {
	name: 'Home',
	components: {HomeProduct},
	data() {
		return {
			carouselList: [], //轮播数据
			recommendedItems:[],//推荐商品项   gift-o
			newArrialItems:[],//新品上架  point-gift-o
			topSaleItems:[],//单品排行  gem-o
			homeItems: [
				{
					title: '新闻咨询',
					img: require('@/assets/images/menu1.png'),
					routeName: 'working'
				},
				{
					title: '图片分享',
					img: require('@/assets/images/menu2.png'),
					routeName: 'working'
				},
				{
					title: '商品购买',
					img: require('@/assets/images/menu3.png'),
					routeName: 'product'
				},
				{
					title: '留言反馈',
					img: require('@/assets/images/menu4.png'),
					routeName: 'working',
					count: 9
				},
				{
					title: '视频专区',
					img: require('@/assets/images/menu5.png'),
					routeName: 'working'
				},
				{
					title: '联系我们',
					img: require('@/assets/images/menu5.png'),
					routeName: 'working'
				}
			]
		};
	},
	//在生命周期函数中调用API接口从后端取业务数据
	created() {
		//使用封装的方法
		getHomeDataAPI().then(result => {
			console.log(result);
			this.carouselList = result.data.carouselItems;//轮播数据
			this.recommendedItems = result.data.recommendedItems; //推荐商品项  
			this.newArrialItems = result.data.newArrialItems;//新品上架
			this.topSaleItems = result.data.topSaleItems; //单品排行
		});
	},

	methods: {
		//跳转到商品明细页面
		onToProductDetail(id) {
			this.$router.push({ name: 'productDetail', params: { id } }); 
		}
	}
};
</script>

<style lang="less" scoped="scoped">
</style>
